<template>
  <div class="reset-box">
    <van-nav-bar
      title="复利"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
      :class="[iosFlag]"
    />
    <div class="login-title">
      <p>OBT</p>
      <span>下应用，看精华，尽在OBT</span>
    </div>
    <div class="field-container">
      <van-field
        class="box-input"
        v-model.lazy="activeAmountModel"
        autofocus
        type="number"
        placeholder="请输入复利数量"
      >
          </van-field>
      <van-field
          v-model="payPassword"
          :type="togglepayPassword?'text':'password'"
          placeholder="请输入支付密码"
          @click-icon="togglepayPassword=!togglepayPassword"
          class="box-input"
          >
          <img
            slot="icon"
            v-if="payPassword"
            :src="togglepayPassword?'static/img/login-visible.png':'static/img/login-invisible.png'"
            style="width: 24px;"
            />
          </van-field>


    </div>
    <van-button
      @click="onSavePassword"
      type="primary"
      size="large"
      class="button-save"
    >复利</van-button>
  </div>
</template>

<script>
  import { NavBar, Button, Field, Cell, CellGroup, Toast } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Button.name]: Button,
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Toast.name]: Toast,
    },
    data() {
      return {
        activeAmountModel: null,
        buttonCanRun: false,
        iosFlag:null,
        buy_type:'',
        other_user_id:'',
        lastPageUrl:"",
        togglepayPassword: false,
        payPassword:""
      }
    },
    mounted() {
    this.lastPageUrl = sessionStorage.getItem("lastAndNowPage").split('-')[1];
    sessionStorage.setItem("lastAndNowPage",this.lastPageUrl+"-/futou");
//      this.buttonClass(false, false);
      this.ismobile(1);
      // 键盘弹出遮挡问题
      if(/Android [4-6]/.test(navigator.appVersion)) {
        window.addEventListener("resize", function() {
          if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
            window.setTimeout(function() {
              document.activeElement.scrollIntoViewIfNeeded();
              $('body').css({
                'height': $(window).height()
              })
            }, 0);
          }
        })
      }
    },
    methods: {
      onClickLeft() {
        this.$router.push(this.lastPageUrl)
      },
//      buttonClass(text, isButtonCanRun) {
//        let btn = document.querySelector(".button-save");
//        if(!this.activeAmountModel && !this.buy_type) {
//          //按钮可点
//          // btn.removeAttribute("disabled");
//          btn.disabled = false;
//        }else{
//          //按钮不可点
//          btn.disabled = true;
//        }
//      },
      onSavePassword() {
        var userMessage = JSON.parse(sessionStorage.getItem("usermessage"));
        if(userMessage){
          token_g = userMessage.token;
        }
        if(this.activeAmountModel == null || this.activeAmountModel < 100){
            Toast('请输入不小于100的复投数量');
            return;
        }
        if(parseInt(this.activeAmountModel) % 10 != 0){
            Toast('请输入至少100的复投量，并且是10的整数倍');
            return;
        }
        if(!this.payPassword){
          Toast('请输入支付密码');
          return;
        }
        this.$axios({
          method: "POST",
          data: 'pay_password='+this.payPassword+'&type=1' + '&qty='+this.activeAmountModel,
          url: url_g+'/buypooltoken/',
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
            console.log(res)
          if(res.data) {
            Toast.success('复投成功');
            this.$router.push(this.lastPageUrl);
          }
        }).catch((e)=>{
              Toast(e.response.data.detail);
        })
      },
      //移动端适配-首页顶部标题栏
      ismobile(test){
        var u = navigator.userAgent, app = navigator.appVersion;
        if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
          if(window.location.href.indexOf("?mobile")<0){
            try{
              if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){
                //this.iosFlag = 'ddisplay';
                document.getElementsByClassName("van-tabbar")[0].style = {};
                document.getElementsByClassName("van-tabbar")[0].style.display = "none";
                this.iosFlag = ' ';
              }else{
                this.iosFlag = ' ';
              }
            }catch(e){
            }
          }
        }else if( u.indexOf('iPad') > -1){
          //this.iosFlag = 'ddisplay';
          document.getElementsByClassName("van-tabbar")[0].style = {};
          document.getElementsByClassName("van-tabbar")[0].style.display = "none";
        }else{
          this.iosFlag = ' ';

        }
      },
      andOrIos() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        return isAndroid
      }
    },
    computed: {

    }
  }
</script>

<style scoped="scoped">
.reset-box {
  height: 100vh;
  background: -moz-linear-gradient( top,#028aed,#273eec);
  background: -webkit-linear-gradient( top,#028aed,#273eec);
}
.login-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
}
.login-title p {
  color: #fff;
  font-size: 40px;
  margin: 0;
  line-height: 60px;
}
.login-title span {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
}
.box-input {
  color: #fff;
  background-color: transparent;
}
.field-container{
  padding:0 12px;
}
.nav-bar{
  margin-bottom:24px;
}
.tip-text{
  display: block;
  /*width:97px;*/
  height:18px;
  font-size:13px;
  font-family:PingFangSC-Regular;
  color:#F10213;
  line-height:18px;
  margin-top: 14px;
}
button {
  display: block;
  width: calc(100% - 24px);
  height: 49px;
  background-color: #025596;
  border: 0;
  border-radius: 4px;
  font-size:15px;
  line-height: 21px;
  color: #fff;
}
button:disabled {
  color: #fff;
  background-color: #81AACB;
}
.ddisplay{
  display: none;
}
.button-save {
  display: block;
  margin: 30px auto;
  width: calc(100% - 24px);
}
.code-btn {
  background-color: transparent;
  font-size: 12px;
  float: right;
  border: 1px solid #fff;
  color: #fff;
}
.active-type{
  margin: 20px 0 0 10px;
  color: #fff;
}
.active-type-one{
  height: 30px;
}
</style>
